<template>
  <div class="nav_link_com">
    <div
      v-for="(tab,idx) in tabs"
      :key="idx"
      @click="clickEvent(tab,idx)"
      :class="['link',index<tabs.length?(index==idx?'active':''):(idx==0?'active':'')]"
    >{{tab.name}}</div>
  </div>
</template>

<script>
export default {
  name: 'NavLink',
  props: {
    tabs: {
      type: Array,
      default: () => []
    },
    index: {
      type: Number,
      default: 1
    }
  },
  data () {
    return {}
  },
  watch: {},
  computed: {},
  methods: {
    clickEvent: function (tab, index) {
      this.$emit('click', { tab, index })
    }
  },
  created () {},
  mounted () {},
  destroyed () {}
}
</script>
<style lang="scss" scoped>
.nav_link_com {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  overflow-x: scroll;
  -webkit-overflow-scrolling: touch;
  flex-wrap: nowrap;
  .link {
    white-space: nowrap;
    text-align: center;
    padding: 15px 0;
    margin-right: 80px;
    border-bottom: 6px solid transparent;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    transition: all 0.3s ease;
  }
  .active {
    border-color: #6730e2;
  }
}
</style>
